<template>
  <div>
    <van-cell @click="linkArticleDetail">
      <template #title>
        <div class="title-box">
          <span class="title" :style="{'width': articleDetail.cover.type === 1 ? '200px' : '340px'}">{{articleDetail.title}}</span>
          <!-- <img class="thumb" v-if="articleDetail.cover.type === 1"  :src="articleDetail.cover.images[0]"> -->
          <van-image radius="10" v-if="articleDetail.cover.type === 1"  :src="articleDetail.cover.images[0]">
            <template v-slot:error>图片走丢了...</template>
          </van-image>
        </div>
        <div class="thumb-box" v-if="articleDetail.cover.type === 3">
          <!-- <img class="thumb" v-for="(item, index) in articleDetail.cover.images" :key="index" :src="item"> -->
          <van-image radius="10" v-for="(item, index) in articleDetail.cover.images" :key="index" :src="item">
            <template v-slot:error>图片走丢了...</template>
          </van-image>
        </div>
      </template>
      <template #label>
        <div class="label-box">
          <div>
            <span>每日新闻</span>
            <span>{{ articleDetail.comm_count }}评论</span>
            <span>{{ formatTime(articleDetail.pubdate) }}</span>
          </div>
          <!-- 反馈按钮 -->
          <van-icon name="cross" @click.stop="showActionSheet" />
        </div>
      </template>
    </van-cell>
    <van-action-sheet v-model="show" @click-overlay="onCancel" duration="0" :actions="actions" @cancel="onCancel" @select="onSelect" get-container="body" :cancel-text="bottomText"
  close-on-click-action/>
  </div>
</template>

<script>
import { timeAgo } from '@/untils/date'
import { firstActions, secondActions } from '@/api/report'
import { dislikeArticleAPI, reportArticleAPI } from '@/api'
export default {
  props: ['articleDetail'],
  data () {
    return {
      show: false,
      // isShow: false,
      actions: firstActions,
      bottomText: '取消'
    }
  },
  methods: {
    formatTime: timeAgo,
    showActionSheet () {
      this.show = true
    },
    async onSelect (item) {
      // console.log(item)
      if (item.name === '不感兴趣') {
        const res = await dislikeArticleAPI(this.articleDetail.art_id)
        console.log(res)
        if (res.status === 201) {
          this.$notify({ type: 'success', message: '反馈成功', duration: 2000 })
        } else if (res.status === 401) {
          this.$notify({ type: 'warning', message: '请先登录', duration: 2000 })
        }
        this.show = false
      } else if (item.name === '反馈垃圾内容') {
        this.bottomText = '返回'
        this.show = true
        this.actions = secondActions
      } else {
        await reportArticleAPI({ target: this.articleDetail.art_id, type: item.value })
        this.actions = firstActions
        this.show = false
        this.$notify({ type: 'success', message: '反馈成功', duration: 2000 })
      }
    },
    onCancel () {
      // this.show = false
      if (this.bottomText === '返回') {
        this.show = true
        this.actions = firstActions
        this.bottomText = '取消'
      }
    },
    linkArticleDetail () {
      this.$router.push(`/article_detail/${this.articleDetail.art_id}`)
    }
  }
}
</script>

<style lang="less" scoped>
  .title-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .label-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      margin: 0 3px;
      &:first-child {
        margin-left: 0;
      }
    }
  }
  .thumb-box {
    display: flex;
    justify-content: space-between;
  }
  /deep/ .van-image {
    width: 113px;
    height: 70px;
    background-color: #f8f8f8;
    object-fit: cover;
    border-radius: 10px;
  }
  .title {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    margin-bottom: 10px;
  }
  .van-cell {
    border-bottom: 1px solid #eee;
    margin: 4px 0;
    .van-cell__label {
      margin-top: 10px;
    }
  }
</style>
